<template>
    <div id="app">
        <div class="title">饿了么</div>
        <div class="btn">
            <span :class="{active:cueeIndex==index}" @click="btnclick(index)" v-for="(item,index) in btnArr" :key="index">{{item}}</span>
        </div>
        <div class="good" v-for="(item,index) in goodList" :key="index">
            <div class="name">{{item.name}}</div>
            <div class="discounts">
                <span v-for="(item,index) in item.mianjian" :key="index">{{item}}</span>
            </div>
            <div class="good_img">
                <div class="img" >
                    <div v-for="(a,b) in item.pic " :key="b">
                        <img :src="a" alt="">
                    </div>
                </div>
                <div class="good_price">
                    <span>￥{{item.price}}</span><br>
                    <span>共{{item.mess}}件</span>
                </div>
            </div>
            <div class="footer">
                <span class="again">
                    {{item.btn}}
                 </span>
            </div>
            
        </div>
    </div>
  </template>
  
  <script>
  import pic1 from '../../assets/1.webp'
  import pic2 from '../../assets/2.webp'
  import pic3 from '../../assets/3.webp'
  export default {
    data(){
        return{
            cueeIndex:0,
            btnArr:['全部','代消费','待评价','退款'],
            goodList:[
                {name:'纯手工饺子(风城九路店)',mianjian:['10减3','25减10','50减21'],pic:[pic1,pic2],price:17.8,mess:2,btn:"再来一单"},
                {name:'唐九便利店(海荣名城店)',pic:[pic3,pic1,pic2],price:18.3,mess:3,btn:"再来一单"},
                {name:'纯手工饺子(风城九路店)',pic:[pic1,pic3],price:28.89,mess:2,btn:"再来一单"}
  
            ]
        }
    },
    methods:{
        btnclick(index){
            this.cueeIndex=index;
        }
    }
  }
  </script >
  
  <style lang="scss" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    #app{
        
        padding: 10px 10px;
        box-sizing: border-box;
        background: #f5f5f5;
    }
    .title{
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-weight: bold;
  
    }
    .btn{
        width: 100%;
        display: flex;
  
    }
    .active{
        font-weight: bold;
        border-bottom: 2px solid aqua;
  
    }
    .btn span {
        line-height: 50px;
        margin-right: 20px;
    }
    .good{
        width: 100%;
        height: 180px;
        background: white;
        margin-top: 10px;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .good .name {
        height: 30px;
        line-height: 30px;
        font-weight: bold;
    }
    .good .discounts {
        width: 100%;
    }
    .good .discounts span{
        border: 1px solid red;
        color: red;
        padding: 0 5px;
        font-size: 12px;
        margin: 10px;
        display: inline-block;
    }
    .good .good_img{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .good .good_img .img{
        width: 50px;
        height: 50px;
        display: flex;
    }
    .good .good_img .img div{
        margin-right: 5px;
        border: 1px solid #ccc;
    }
    .good .good_img .img img{
        width: 50px;
        height: 50px;
    }
    .good .good_img  .good_price{
        line-height: 30px;
    }
    .good .good_img  .good_price span:nth-child(1){
       font-weight: bold;
    }
    .good .good_img  .good_price span:nth-child(3){
        font-size: 14px;
    }
    .footer{
        display: flex;
        justify-items: right;
    }
     .good .again{
        display: inline-block;
       padding: 10px 15px;
        border: 1px solid rgb(65, 194, 238);
        border-radius: 48px;
       margin-left:239px;
     }
  </style>